import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col,Select,Switch,Popconfirm,Radio,DatePicker }from 'antd';
const Search = Input.Search;
const Option = Select.Option;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';

import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';
const {RangePicker} = DatePicker;
const dateFormat = 'YYYY-MM-DD';


export default class SearchPanel extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
          search:{}
        };
    }
    onSearch(){
      let {visibility,onSearch} = this.props;
      let {search} = this.state;
      onSearch(search);
    }
    onReset(){
      let {onReset} = this.props;
      this.setState({
        search:{},
      })
      onReset();
    }

    onDateChange(date,dateString){
      let {search} = this.state;
      search.start_date = dateString[0];
      search.end_date = dateString[1];
      this.setState({
        search,
      })
    }

    onGradeChange(value){
      let {search} = this.state;
      search.level = value;
      this.setState({search});
    }

    onSettleChange(e){
      let {search} = this.state;
      search.settled = e.target.value;
      this.setState({search});
    }
    
    render() {
      let {visibility} = this.props;
      let {search} = this.state;

        return (
                  <Modal
                    visible={visibility}
                    onOk= {this.onSearch.bind(this)}
                    onCancel={this.onReset.bind(this)}
                    okText="筛选"
                    cancelText="重置"
                  >

                    <Row gutter={24} className="marginT10">
                        <Col span={6} className='text-right' style={{lineHeight:"30px"}}>债务人：</Col>
                        <Col span={16}>
                          <Input
                            {...this::bind_change('search.debtor')}
                            placeholder="请输入债务人"
                            style={{"width":"100%"}}
                          />
                            
                        </Col>

                    </Row>
                    <Row gutter={24} className="marginT10">
                        <Col span={6} className='text-right' style={{lineHeight:"30px"}}>债权人：</Col>
                        <Col span={16}>
                          <Input
                            placeholder="请输入债权人"
                            {...this::bind_change('search.creditor')}
                          />
                        </Col>
                    </Row>
                    <Row gutter={24} className="marginT10">
                      <Col span={6} className='text-right' style={{lineHeight:"30px"}}>应收分级：</Col>
                      <Col span={16}>
                        <Select
                          placeholder=""
                          style={{"width":"100%"}}
                          onChange={this.onGradeChange.bind(this)}
                          value = {search.level ? this.state.search.level : '1'}

                        >
                          <Select.Option value="1">正常</Select.Option>
                          <Select.Option value="2">逾期</Select.Option>
                          <Select.Option value="3">关注</Select.Option>
                          <Select.Option value="4">次级</Select.Option>
                          <Select.Option value="5">违约</Select.Option>
                        </Select>
                      </Col>
                    </Row>
                    <Row gutter={24} className="marginT10">
                      <Col span={6} className='text-right' style={{lineHeight:"30px"}}>是否结算：</Col>
                      <Col span={16}>
                        <Radio.Group 
                          onChange={this.onSettleChange.bind(this)}
                          value={search.settled}
                        >
                          <Radio.Button value="1">已结算</Radio.Button>
                          <Radio.Button value="0">未结算</Radio.Button>
                        </Radio.Group>
                      </Col>
                    </Row>
                    <Row gutter={24} className="marginT10">
                      <Col span={6} className='text-right' style={{lineHeight:"30px"}}>应收期限：</Col>
                      <Col span={16}>
                        <RangePicker 
                          onChange ={this.onDateChange.bind(this)} 
                          />
                      </Col>
                    </Row>

                  </Modal>
               
        );
    }

    
}
SearchPanel.contextTypes= { router: React.PropTypes.object.isRequired};
